<!--智慧消防V1.0-edit.vue页面-->
<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div style="text-align: center;margin-bottom: 30px">
                    设备维保信息{{createStatus?'新增':'更新'}}
                </div>
                <el-form :model="maintenanceForm" ref="maintenanceForm" :rules="maintenanceFormRules" label-width="150px">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="设备名称" prop="equipmentId">
                            <el-select v-model="maintenanceForm.equipmentId" placeholder="请选择设备" style="width: 100%">
                                <el-option v-for="(item,index) in equipmentList" :key="index"  :value="item.ucId" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保企业" prop="maintenanceEnterprise" v-if="enterPriseHidden">
                            <el-select v-model="maintenanceForm.maintenanceEnterprise" placeholder="请选择维保企业" style="width: 100%" @change="getMaintenanceUserList">
                                <el-option v-for="(item,index) in maintenanceEnterpriseList" :key="index"  :value="item.ucId" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保人员" prop="maintenanceUser">
                            <el-select v-model="maintenanceForm.maintenanceUser" placeholder="请选择维保人员" style="width: 100%">
                                <el-option v-for="(item,index) in MaintenanceUserList" :key="index"  :value="item.ucId" :label="item.disPlayName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保时间" prop="maintenanceTime">
                            <el-date-picker
                                    v-model="maintenanceForm.maintenanceTime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保类型" prop="maintenanceType">
                            <el-select v-model="maintenanceForm.maintenanceType" placeholder="请选择维保类型" style="width: 100%">
                                <el-option :value="0" label="正常维护"></el-option>
                                <el-option :value="1" label="维修机器"></el-option>
                                <el-option :value="2" label="更换机器"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保状态" prop="maintenanceStatus">
                            <el-select v-model="maintenanceForm.maintenanceStatus" placeholder="请选择维护状态" style="width: 100%">
                                <el-option :value="0" label="未维护"></el-option>
                                <el-option :value="1" label="维护中"></el-option>
                                <el-option :value="2" label="维护完成"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="安装时间 " prop="installTime">
                            <el-date-picker
                                    v-model="maintenanceForm.installTime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维护描述" prop="maintenanceRemark">
                            <el-input type="text" v-model="maintenanceForm.maintenanceRemark" placeholder="请输入维护描述" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维护意见" prop="disposalOpinions">
                            <el-input type="text" v-model="maintenanceForm.disposalOpinions" placeholder="请输入维护意见" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保计划完成时间 " prop="endTime">
                            <el-date-picker
                                    v-model="maintenanceForm.endTime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="实际结束时间 " prop="actualEndTime">
                            <el-date-picker
                                    v-model="maintenanceForm.actualEndTime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="维保计划开始时间 " prop="startTime">
                            <el-date-picker
                                    v-model="maintenanceForm.startTime"
                                    type="datetime"
                                    placeholder="选择日期"
                                    style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="维保照片" prop="maintenancePicList">
                            <el-upload
                                    class="avatar-uploader"
                                    :headers="headers"
                                    :limit="2"
                                    :data="{type:'pic'}"
                                    :action="uploadImg"
                                    :on-exceed="uploadOverrun"
                                    :on-remove="handleRemove"
                                    :on-success="handleAvatarSuccess"
                                    accept=".jpg,.jpeg,.png,.gif"
                                    list-type="picture-card"
                                    multiple
                                    :file-list="picData">
                                <i class="el-icon-plus" />
                                <!--                                <img  :src="picUrl" class="avatar">-->
                                <!--                                <el-progress v-if="imgFlag == true" type="circle" :percentage="imgUploadPercent" style="margin-top:30px;"></el-progress>-->
                                <!--                                <i v-else-if="!maintenanceForm.maintenancePic && imgFlag == false" class="el-icon-plus avatar-uploader-icon"></i>-->
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-form>
                <div style="text-align: center" class="dialog-footer">
                    <el-button @click="cancelMaintenance">取 消</el-button>
                    <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createMaintenance">创 建</el-button>
                    <el-button :loading="addLoading" v-else type="primary" @click="updateMaintenance">修 改</el-button>
                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import {addInEquipmentMaintenance,updateInEquipmentMaintenance,getInEquipmentMaintenanceVo} from "@/api/equipmentMaintenance";
import {getInEnterpriseList, getInUserList} from "@/api/enterprise";
import {getToken} from "@/utils/auth";
import {uploadImg} from "@/api/common";
import {getEquipmentList, getInspectionVo} from "@/api/equipment";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";


export default {
    name: "maintenanceForm",
    data(){
        return{
            uploadImg,
            maintenanceForm:{
                maintenancePicList:[]
            },
            maintenanceFormRules:{

            },
            addLoading:false,
            enterpriseDominantList:[],
            equipmentList:[],
            maintenanceEnterpriseList:[],
            MaintenanceUserList:[],

            imgFlag:false,
            imgUploadPercent:0,
            picData:[],

        }
    },
    computed:{
        createStatus(){
            return this.$route.params.ucId =='0'
        },
        headers() {
            return {
                'Authorization': getToken()
            }
        },
      enterPriseHidden(){
        let roleCode = this.$store.getters.roleCode;
        return roleCode=="ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"
      },
    },
    created() {
        this.getEquipmentList()
        this.getInEnterpriseDominantList()
        this.getMaintenanceEnterpriseList()
        this.getMaintenanceUserList()
        if (!this.createStatus){

            this.getInEquipmentMaintenanceVo().then(res=>{
                this.maintenanceForm = res.data
               this.picData=this.maintenanceForm.maintenancePicList.map(item=>{
                   return{
                       name: item+".jpg",
                       url:   item
                   }
               })
                this.getMaintenanceUserList(res.data.maintenanceEnterprise)

            }).catch(error=>{

            })
        }

    },
    methods:{
        cancelMaintenance(){
          window.history.back()
        },
        createMaintenance(){
            this.addLoading = true
            this.$refs['maintenanceForm'].validate(valid => {
                if (valid){
                    addInEquipmentMaintenance(this.maintenanceForm).then(res=>{
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "添加设备维保信息成功"
                        })
                        this.cancelMaintenance()
                    }).catch(res=>{
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                }else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        updateMaintenance(){
            this.addLoading = true
            this.$refs['maintenanceForm'].validate(valid => {
                if (valid){
                    updateInEquipmentMaintenance(this.maintenanceForm).then(res=>{
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "更新设备维保信息成功"
                        })
                        this.cancelMaintenance()
                    }).catch(res=>{
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                }else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        getInEquipmentMaintenanceVo(){
            return new Promise((resolve, reject) => {
                getInEquipmentMaintenanceVo({ucId:this.$route.params.ucId}).then(res=>{
                    resolve(res)
                }).catch(error=>{
                    reject(error)
                })
            })
        },
        getInEnterpriseDominantList(){
            getInEnterpriseDominantList({deleted:false}).then(res=>{
                this.enterpriseDominantList = res.data
            }).catch(error=>{

            })
        },
        uploadImgProcess(event, file, fileList){
            this.imgFlag = true;
            this.imgUploadPercent = file.percentage.toFixed(0);
        },
        uploadOverrun: function() {
            this.$message({
                type: 'error',
                message: '上传文件个数超出限制!最多上传2张图片!'
            })
        },
        handleAvatarSuccess(response, file,fileList) {
            //图片上传成功
            this.maintenanceForm.maintenancePicList.push(response.data)
        },
        handleRemove: function(file, fileList) {
            for (let i = 0; i < this.maintenanceForm.maintenancePicList.length; i++) {
                // 这里存在两种情况
                // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
                //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
                // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
                let url
                if (file.response==undefined){
                    url = file.url
                }else {
                    url = file.response.data
                }
                if (this.maintenanceForm.maintenancePicList[i] === url) {
                    this.maintenanceForm.maintenancePicList.splice(i, 1)
                }
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        getEquipmentList(){
            getEquipmentList({deleted:false}).then(res=>{
                console.log(res.data)
                this.equipmentList = res.data
            }).catch(error=>{

            })
        },

        getMaintenanceEnterpriseList(){
            getInEnterpriseDominantList({deleted:false,dominantType:9}).then(res=>{
                console.log(res.data)
                this.maintenanceEnterpriseList = res.data
            }).catch(error=>{

            })
        },
        getMaintenanceUserList(val){
            getInUserList({deleted:false,flagId:val}).then(res=>{
                console.log(res.data)
                this.MaintenanceUserList = res.data
            }).catch(error=>{

            })
        }



    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 149px;
    height: 149px;
    line-height: 149px;
    text-align: center;
}
.avatar {
    width: 149px;
    height: 149px;
    display: block;
}
</style>